﻿.beyond-skin(@themeprimary; @themesecondary; @themethirdcolor; @themefourthcolor; @themefifthcolor; @btn-primary-hover; @btn-primary-border; @btn-primary-active; @btn-primary-activeborder; @btn-primary-dropdown-border ) {
  /*Colors*/
  .themeprimary {
    color: @themeprimary !important;
  }

  .themesecondary {
    color: @themesecondary !important;
  }

  .themethirdcolor {
    color: @themethirdcolor !important;
  }

  .themefourthcolor {
    color: @themefourthcolor !important;
  }

  .themefifthcolor {
    color: @themefifthcolor !important;
  }
  /*Background Colors*/
  .bg-themeprimary {
    background-color: @themeprimary !important;
  }

  .bg-themesecondary {
    background-color: @themesecondary !important;
  }

  .bg-themethirdcolor {
    background-color: @themethirdcolor !important;
  }

  .bg-themefourthcolor {
    background-color: @themefourthcolor !important;
  }

  .bg-themefifthcolor {
    background-color: @themefifthcolor !important;
  }
  /*Before Colors*/
  .before-themeprimary {
    &:before {
      background-color: @themeprimary !important;
    }
  }

  .before-themesecondary {
    &:before {
      background-color: @themesecondary !important;
    }
  }

  .before-themethirdcolor {
    &:before {
      background-color: @themethirdcolor !important;
    }
  }

  .before-themefourthcolor {
    &:before {
      background-color: @themefourthcolor !important;
    }
  }

  .before-themefifthcolor {
    &:before {
      background-color: @themefifthcolor !important;
    }
  }
  /*Border Colors*/
  .bordered-themeprimary {
    border-color: @themeprimary !important;
  }

  .bordered-themesecondary {
    border-color: @themesecondary !important;
  }

  .bordered-themethirdcolor {
    border-color: @themethirdcolor !important;
  }

  .bordered-themefourthcolor {
    border-color: @themefourthcolor !important;
  }

  .bordered-themefifthcolor {
    border-color: @themefifthcolor !important;
  }
  /*Typography*/
  h1, h2, h3, h4, h5, h6 {
    &.row-title {
      &:before {
        background-color: @themeprimary;
      }
    }
  }
  /*Navbar*/
  .navbar {
    .navbar-inner {
      background: @themeprimary;

      .navbar-header {
        .navbar-account {
          .account-area {
            > li {
              > a {
                .badge {
                  box-shadow: 1px 1px 0 @themeprimary;
                }
              }

              .dropdown-menu {
                &.dropdown-messages {
                  li {
                    .message-time {
                      color: @themeprimary;
                    }
                  }
                }

                &.dropdown-login-area {
                  > li {
                    .avatar-area {
                      .caption {
                        background-color: @themeprimary;
                      }
                    }

                    &.dropdown-footer {
                      border-top: 3px solid @themeprimary;
                    }
                  }
                }
              }

              &.open {
                > a {
                  background-color: @themeprimary;
                }
              }
            }

            .login-area {
              .avatar {
                border-left: 2px solid @themesecondary;
              }
            }
          }

          .setting-container {

            input[type=checkbox] {
              + .text {
                &:before {
                  border-color: @themeprimary;
                }
              }

              &:checked {
                + .text {
                  &:before {
                    border-color: @themeprimary;
                    color: @themesecondary;
                  }
                }
              }
            }
          }

          &.setting-open {
            .setting {
              background-color: @themeprimary;
            }
          }
        }
      }
    }
  }
  /*Sidebar*/
  .page-sidebar {
    &:hover .sidebar-collapse .collapse-icon {
      color: @themeprimary;
    }

    .sidebar-header-wrapper {
      margin-left: 5px;
      height: 40px;
      margin-bottom: 0;
      position: relative;

      .searchicon {
        color: @themeprimary;
      }
    }

    .sidebar-menu {
      li {
        &:before {
          background-color: @themeprimary;
        }

        &:not(.open) {
          &:hover {
            &:before {
              background-color: @themesecondary;
            }
          }
        }
      }
    }

    .sidebar-collapse {
      &:before {
        background-color: @themeprimary;
      }

      .collapse-icon {
        &:hover {
          background-color: @themeprimary;
          color: #fff;
        }
      }
    }
  }
  /*Page Header*/
  .page-header {
    .header-buttons {
      a {
        &:before {
          background-color: @themeprimary;
        }

        &:hover {
          color: @themeprimary;
        }

        &.active {
          color: @themeprimary;
        }

        &.fullscreen {
          &:before {
            background-color: @themesecondary;
          }

          &:hover, &.active {
            color: @themesecondary;
          }
        }

        &.sidebar-toggler {
          &:before {
            background-color: @themeprimary;
          }

          &:hover, &.active {
            color: @themeprimary;
          }
        }
      }
    }
  }
  /*Widget*/
  .widget {
    &:hover .compact {
      i {
        color: @themeprimary;
      }
    }
  }

  .widget-buttons {
    &.compact {
      &:hover {
        background-color: @themeprimary;

        i {
          color: #fff !important;
        }
      }

      &:before {
        background-color: @themeprimary;
      }
    }
  }
  /*Databoxes*/
  .databox {
    .databox-left {
      color: @themeprimary;
    }

    &.databox-vertical {
      .databox-top {
        color: @themeprimary;
      }
    }
  }
  /*Tabs*/
  .nav-tabs {
    > li {
      &.active {
        > a {
          &, &:hover, &:focus {
            border-top: 2px solid @themeprimary;
          }
        }
      }
    }
  }
  /*Primary Button*/
  .btn-primary {
    &, &:focus {
      background-color: @themeprimary !important;
      border-color: @btn-primary-border;
    }

    &.dropdown-toggle {
      border-left-color: @btn-primary-dropdown-border !important;
    }

    &.active {
      background-color: @btn-primary-active !important;
      border-color: @btn-primary-activeborder;
    }

    &.shiny {
      .background-image(linear-gradient(center top, @themeprimary 5%, @btn-primary-active 100%));
    }
  }

  .btn-primary:hover, .open .btn-primary.dropdown-toggle {
    background-color: @btn-primary-hover !important;
    border-color: @btn-primary-border;
  }

  .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {
    background-color: @btn-primary-border !important;
    border-color: @btn-primary-border;
  }
  /*Primary Label*/
  .badge-primary,
  .label-primary {
    background-color: @themeprimary !important;

    &.graded {
    }
  }
  /*Popover*/
  .popover-title {
    border-bottom: 3px solid @themeprimary;
  }
  /*tooltip*/
  .tooltip-primary {
    + .tooltip {
      > .tooltip-inner {
        border: 1px solid @themeprimary;
        background-color: @themeprimary;
      }

      &.top .tooltip-arrow {
        border-top-color: @themeprimary;
      }

      &.right .tooltip-arrow {
        border-right-color: @themeprimary;
      }

      &.left .tooltip-arrow {
        border-left-color: @themeprimary;
      }

      &.bottom .tooltip-arrow {
        border-bottom-color: @themeprimary;
      }
    }
  }
  /*ProgressBar*/
  .progress-bar {
    background-color: @themeprimary;
  }
  /*Notification*/
  .toast-primary {
    background-color: @themeprimary !important;
  }
  /*Modal*/
  .modal-primary {
    .modal-header {
      border-bottom: 3px solid @themeprimary;
    }
  }
  /*Dropdown*/
  .dropdown-primary li a:hover, .dropdown-primary li a:focus, .dropdown-primary li a:active, .dropdown-primary li.active a, .dropdown-primary li.active a:hover, .dropdown-primary .dropdown-submenu:hover > a, .nav-tabs .dropdown-primary li > a:focus {
    background: @themeprimary;
  }
  /*Pagination*/
  .pagination > li.active > a, .pagination > li.active > a:hover {
    background-color: @themeprimary;
    border-color: @themeprimary;
  }
  /*Table*/
  .table {
    thead {
      &.colored-primary {
        > tr {
          > th {
            background-color: @themeprimary;
          }
        }

        &.bordered-primary {
          > tr {
            > th {
              border-bottom: 3px solid @themeprimary;
            }
          }
        }
      }
    }
  }

  @media only screen and (max-width: 800px) {
    .table {
      thead {
        &.bordered-primary {
          > tr {
            > th {
              border-right: 3px solid @themeprimary;
            }
          }
        }
      }
    }
  }
  /*Nestable Lists*/
  .dd-list > li.bordered-primary > .dd-handle {
    border-left-color: @themeprimary;
  }
  /*Treeview*/
  .tree-loading {
    color: @themeprimary !important;
  }
  /*Wizard*/
  .wizard {
    ul {
      li {
        &.active {
          .step {
            border-color: @themeprimary;
            color: @themeprimary;
          }

          &:before {
            background-color: @themeprimary;
          }
        }
      }
    }
  }
  /*Inputs*/
  input[type=checkbox], input[type=radio] {
    &.colored-primary {
      &:checked {
        + .text {
          color: @themeprimary;

          &:before {
            border-color: @themeprimary;
            color: @themeprimary;
          }
        }
      }
    }
  }

  input[type=checkbox].checkbox-slider {
    &.colored-primary {
      + .text {
        &:after {
          border-color: @themeprimary;
        }
      }

      &:checked {
        + .text {
          &:before {
            background-color: @themeprimary;
            border-color: @themeprimary;
            color: #fff;
          }

          &:after {
            background-color: @themeprimary;
          }
        }
      }

      &.slider-icon {
        &:checked {
          + .text {
            &:after {
              color: @themeprimary;
            }
          }
        }

        + .text {
          &:after {
            color: @themeprimary;
          }
        }
      }

      &.toggle {
        &:checked {
          + .text {
            &:after {
              color: @themeprimary;
            }
          }
        }

        + .text {
          &:after {
            background-color: @themeprimary;
          }
        }
      }
    }
  }
  /*Slider*/
  .noUi-connect {
    background: @themeprimary;
  }

  .ui-rangeSlider {
    &.valuelabel-primary {
      .ui-rangeSlider-label {
        background-color: @themeprimary;
      }

      .ui-rangeSlider-label-inner {
        border-top: 6px solid @themeprimary;
      }
    }

    &.silder-primary {
      .ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner:before,
      .ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner:before {
        color: @themeprimary !important;
      }

      .ui-rangeSlider-bar {
        background: @themeprimary !important;
      }
    }
  }

  .ui-rangeSlider-label {
    background-color: @themesecondary;
  }

  .ui-rangeSlider-bar {
    background: @themeprimary;
  }

  .ui-rangeSlider-label-inner {
    border-top: 6px solid @themesecondary;
  }
  /*Select2*/
  .select2-results .select2-highlighted {
    background: @themeprimary;
  }

  .select2-container-multi .select2-choices .select2-search-choice {
    border: 1px solid @themeprimary;
    background-color: @themeprimary;
  }
  /*Tags Input*/
  .bootstrap-tagsinput {
    > span {
      border: 1px solid @themeprimary;
      background: @themeprimary;
    }
  }
  /*DatePicker*/
  .datepicker {
    td {
      &.active,
      &.active:hover {
        background-color: @themeprimary;
      }

      span {
        &.active {
          background-color: @themeprimary;
        }
      }
    }
  }
  /*DateRangePicker*/
  .daterangepicker .ranges li {
    color: @themeprimary;
  }

  .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
    background: @themeprimary;
    border: 1px solid @themeprimary;
  }

  .daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: @themeprimary;
    border-color: @themeprimary;
  }
  /*Editors*/
  .note-editor .dropdown-menu li a i {
    color: @themeprimary;
  }

  .note-editor .note-dropzone.hover {
    color: @themeprimary;
    border: 2px dashed @themeprimary;
  }
  /*Lockscreen*/
  .lock-container {
    .lock-box {
      .btn-lock, .btn-lock:hover {
        color: @themeprimary;
      }
    }

    .signinbox {
      a {
        color: @themeprimary;
      }
    }
  }
  /*Pricing Tables*/
  .pricing-container {
    .plan {
      .signup {
        background-color: @themeprimary;
      }
    }
  }
  //Profile
  .profile-container {
    .profile-body {
      .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        border-bottom: 2px solid @themeprimary;
      }
    }
  }
  /*Comment*/
  .comment {
    .comment-footer {
      a {
        &:hover {
          color: @themeprimary;
        }
      }
    }
  }
  /*Mail*/
  .mail-container {
    .mail-header {
      .header-buttons {
        li {
          a {
            &:hover {
              border-color: @themeprimary;

              i {
                color: @themeprimary;
              }
            }
          }
        }
      }
    }

    .mail-body {
      .mail-info {
        .mail-sender, .mail-date {
          &.mail-sender {
            span {
              color: @themesecondary;
            }
          }
        }
      }

      .mail-reply {
        .reply-form {
          > div {
            a {
              color: @themesecondary;
            }
          }
        }
      }

      .mail-list {
        .list-item {
          &:before {
            background-color: @themeprimary;
          }
        }
      }
    }
  }
  /*Calendar*/
  .external-event {
    border-left: 4px solid @themeprimary;
  }
  /*Dashboard*/
  .dashboard-box {
    .box-header {
      .deadline {
        border-top: 3px solid @themeprimary !important;
      }
    }

    .box-progress {
      .progress-handle {
        background-color: @themeprimary !important;

        &:after {
          border-top-color: @themeprimary !important;
        }
      }
    }

    .box-days {
      .day-container {
        &:hover {
          background-color: @themeprimary;
          border: 1px solid @themeprimary;

          .day-pin {
          }
        }

        &.highlight {
          background-color: @themeprimary;
          border: 1px solid @themeprimary;

          &:hover {
            color: @themeprimary;
          }
        }

        .day-more {
          color: @themeprimary;
        }
      }
    }
  }
  /*Orders*/
  .orders-container {
    .orders-list {
      .order-item {
        &:before {
          background-color: @themeprimary !important;
        }

        &.top {
          &:hover {
            &:before {
              background-color: @themesecondary !important;
            }
          }

          .item-more {
            color: @themesecondary !important;
          }
        }

        .item-more {
          color: @themeprimary !important;
        }
      }
    }
  }
  /*Error Pages*/
  .body-404 {
    background-color: @themeprimary;
  }

  .error-container {
    h1 {
      color: @themeprimary;
    }
  }

  .return-btn {
    &:hover {
      color: @themeprimary;
    }
  }

  .body-500 {
    background-color: @themesecondary;

    .error-container {
      h1 {
        color: @themesecondary;
      }
    }

    .return-btn {
      &:hover {
        color: @themesecondary;
      }
    }
  }
  //Loading
  .loading-container {
    background-color: @themeprimary !important;
  }
  //Breadcrumbs
  .breadcrumb {
    & > li > a {
      color: @themeprimary;
    }
  }
  //Chat

  .page-chatbar {
    .chatbar-contacts {
      .contacts-search {
        .searchicon {
          color: @themeprimary;
        }
      }
    }

    .chatbar-messages {
      .messages-contact {
        .back {
          i {
            color: @themeprimary;
          }
        }
      }
    }
  }
}

//@todo 整理深色模式需要覆盖的颜色
.beyond-dark-skin(@themeprimary) {
  /*Navbar*/
  .navbar {
    .navbar-inner {
      background: @themeprimary;
    }
  }
  .widget-body {
    background-color: @themeprimary;
  }
  .page-sidebar:before {
    background-color: @themeprimary;
  }
  body:before {
    background-color: @themeprimary;
  }
  .page-sidebar .sidebar-menu > li > a {
    border-top: 1px solid #ff6e6e;
  }
  .page-sidebar .sidebar-menu a {
    color: #ffffff;
  }
}
